<template>
  <div class="work">
      <div class="head">工作</div>
      <div class="img"> <img src="../../assets/img/6.png" alt=""> </div>
      <div class="goin-box">
        <div class="goin"><van-icon name="bullhorn-o"/>新要求会在这里滚动通知，进去看看</div>
        <div class="more">更多</div>
      </div>
      <div class="title">智能办公</div>
      <ul class="office">
        <li @click="jumpHandle('/attendance')">
          <img src="../../assets/img/7.png" alt="">
          <div>考勤</div>
        </li>
        <li @click="jumpHandle('/daily')">
          <img src="../../assets/img/8.png" alt="">
          <div>日常</div>
        </li>
        <li @click="jumpHandle('/scheduling')">
          <img src="../../assets/img/9.png" alt="">
          <div>排班</div>
        </li>      
          <li @click="jumpHandle('/jobtransfer')">
              <img src="../../assets/img/10.png" alt="">
              <div>岗位调动</div>
          </li> 
        <li @click="jumpHandle('/record')">
          <img src="../../assets/img/11.png" alt="">
          <div>交班记录</div>
        </li>
        <li @click="jumpHandle('/approval')">
          <img src="../../assets/img/12.png" alt="">
          <div>审批</div>
        </li>
        <li @click="jumpHandle('/carapply')">
          <img src="../../assets/img/13.png" alt="">
          <div>用车申请</div>
        </li>
        <li @click="jumpHandle('/goods')">
          <img src="../../assets/img/14.png" alt="">
          <div>物品领用</div>
        </li>
        <li  @click="jumpHandle('/equipment')">
          <img src="../../assets/img/15.png" alt="">
          <div>智能设备</div>
        </li>
        <li @click="jumpHandle('/location')">
          <img src="../../assets/img/7.png" alt="">
          <div>定位</div>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
    name:'work',
    methods:{
      jumpHandle(url){
        this.$router.push(url)
      }
    }
}
</script>

<style scoped lang="less">
.work{
.head{
  height:1.3rem;
  width:100%;
  background-color: #4e90ff;
  color:#fff;
  letter-spacing: 5px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height:1.3rem;
}
  .img{
    height:2.3rem;
    padding:0.47rem 0.32rem 0.68rem;
    background-color: #fff;
    img{
      width:100%;
      height:100%;
    }
  }
  .goin-box{
    padding:0 0.32rem 0.65rem 0.35rem;
    background-color: #fff;
    .goin{
      float: left;
      color:#999;
      font-size: 0.2rem;
      font-weight: 600;
    }
    .more{
      float: right;
      color:#4e90ff;
      font-size: 0.2rem;
      font-weight: 600;
    }
  }
  .title{
    font-size: 0.3rem;
    font-weight: 700;
    padding-left:0.3rem;
    padding-bottom:0.36rem;
    background-color: #fff;
  }
  .office{
    display:flex;
    flex-wrap:wrap;
    background-color: #fff;
    li{
      width:25%;
      padding-bottom: 0.66rem;
      text-align: center;
      font-size:0.18rem;
      img{
        width:0.95rem;
        height:0.95rem;
        border-radius: 50%;
        margin-bottom:10px;
      }
    }
  }
}

</style>